<template>
  <div>
    <van-tabbar 
      active-color='#f66' inactive-color='green' 
      route
    >
    <van-tabbar-item 
      to='/home'>
      <template #icon="props">
        <span>首页</span>
          <van-icon name = "shouye" class-prefix ="icon" class="iconfont"/>
      </template>
    </van-tabbar-item>
    <van-tabbar-item 
      to = '/cate'>
     <template #icon="props">
        <span>分类</span>
          <van-icon name = "cate" class-prefix ="icon" class="iconfont" size="12"/>
      </template>
    </van-tabbar-item>
    <van-tabbar-item 
      to = '/car'
      :badge="items.length?items.length:''">
        <template #icon="props">
          <span>购物车</span>
          <van-icon name = "cart" class-prefix ="icon" class="iconfont"/>
        </template>
      </van-tabbar-item>
    <van-tabbar-item 
      to = '/mine'>
        <template #icon="props">
          <span>我的</span>
          <van-icon name = "geren" class-prefix ="icon" class="iconfont"/>
        </template>
      </van-tabbar-item>
</van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
  ...mapState({
    items: (state) => state.cardata.items
  })
  }
}
</script>

<style lang="scss" scoped>

</style>
